<template>
  <div>
    <ul class="mui-table-view">
          <li class="mui-table-view-cell mui-media-connect tips" v-if='!friends.length'>您还没有好友，赶紧添加一个吧</li>
          <li class="mui-table-view-cell mui-media-connect" v-for="item in friends" :key="item.jid" :data-jid="item.jid">
            <a href="javascript:;">
              <img
              class="mui-media-object mui-pull-left"
               :src="item.headicon || $imHeadIcon">
              <div class="mui-media-body">
                {{item.name}}
              </div>
            </a>
          </li>
    </ul>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  // import {SET_CURRENT_CHAT_USER, RESET_MESSAGE_LIST_UNREADNUM} from '../../store/mutation-types'
  export default {
    created() {
      // this.getFriendsList()1105181206098244#mini-chat_sjr9@easemob.com   str.splice(str.indexOf('-')).split('@)[0]
    },
    computed: {
      ...mapState(['friends'])
    },
    mounted() {
      // this.muiScroll()
      this.muiTap()
    },
    methods: {
      // ...mapMutations({
      //   setCurrentChatUserId: SET_CURRENT_CHAT_USER,
      //   resetMessageListUnreadnum: RESET_MESSAGE_LIST_UNREADNUM
      // }),
      muiScroll() {
        //  mui滚动函数
          self.$immui('.mui-scroll-wrapper').scroll()
      },
      muiTap() {
        // 通讯录点击进去聊天列表
        var self = this
        self.$immui('ul').on('tap', '.mui-media-connect', function (e) {
          let jid = this.getAttribute('data-jid')
          console.log(jid)
          // 1105181206098244#mini-chat_cwf18@easemob.com
          let arr = jid.split('@')
          arr = arr[0].split('_')
          jid = arr[1]
          // self.$router.push({name: 'connectpersion', query: {jid: jid}})
          self.$router.push({path: '/connectperson/' + jid})
        })
      },
      getFriendsList() {
        console.log('获取通讯录里面好友的列表，可以分为群组和单人聊天室')
      }
    }
  }
</script>

<style lang='scss' scoped>
  .mui-media-body{
    line-height: 40px;
  }
  .tips{
    color: rgb(162, 165, 167);
  }
</style>
